<template>
	<u-mask :show="show" :mask-click-able="false">
		<view class="card" :class="curSection !== '#about' ? 'is-active' : ''" :data-state="curSection">
			
			<view class="card-header">
				<image src="../../static/close.png" mode="" class="closeIcon" @click="closeFun"></image>
				<view class="card-cover" style="background-image: url('./img/user.jpg')"></view>
				<img class="card-avatar" src="./img/user.jpg" alt="avatar" />
				<h1 class="card-fullname">{{ cardInfo.name }}</h1>
				<h2 class="card-jobtitle">本次就诊患者</h2>
			</view>
			<view class="card-main">
				<view class="card-section" :class="curSection == '#about' ? 'is-active' : ''" id="about">
					<view class="card-content">
						<view class="card-subtitle">医生建议：</view>
						<p class="card-desc">{{ registrationInfo.advice ? registrationInfo.advice : '暂无建议' }}</p>
					</view>
					<view class="card-social">
						<a href="#">
							<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
								<path
									d="M15.997 3.985h2.191V.169C17.81.117 16.51 0 14.996 0c-3.159 0-5.323 1.987-5.323 5.639V9H6.187v4.266h3.486V24h4.274V13.267h3.345l.531-4.266h-3.877V6.062c.001-1.233.333-2.077 2.051-2.077z"
								/>
							</svg>
						</a>
						<a href="#">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
								<path
									d="M512 97.248c-19.04 8.352-39.328 13.888-60.48 16.576 21.76-12.992 38.368-33.408 46.176-58.016-20.288 12.096-42.688 20.64-66.56 25.408C411.872 60.704 384.416 48 354.464 48c-58.112 0-104.896 47.168-104.896 104.992 0 8.32.704 16.32 2.432 23.936-87.264-4.256-164.48-46.08-216.352-109.792-9.056 15.712-14.368 33.696-14.368 53.056 0 36.352 18.72 68.576 46.624 87.232-16.864-.32-33.408-5.216-47.424-12.928v1.152c0 51.008 36.384 93.376 84.096 103.136-8.544 2.336-17.856 3.456-27.52 3.456-6.72 0-13.504-.384-19.872-1.792 13.6 41.568 52.192 72.128 98.08 73.12-35.712 27.936-81.056 44.768-130.144 44.768-8.608 0-16.864-.384-25.12-1.44C46.496 446.88 101.6 464 161.024 464c193.152 0 298.752-160 298.752-298.688 0-4.64-.16-9.12-.384-13.568 20.832-14.784 38.336-33.248 52.608-54.496z"
								/>
							</svg>
						</a>
						<a href="#">
							<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
								<path d="M301 256c0 24.852-20.148 45-45 45s-45-20.148-45-45 20.148-45 45-45 45 20.148 45 45zm0 0" />
								<path
									d="M332 120H180c-33.086 0-60 26.914-60 60v152c0 33.086 26.914 60 60 60h152c33.086 0 60-26.914 60-60V180c0-33.086-26.914-60-60-60zm-76 211c-41.355 0-75-33.645-75-75s33.645-75 75-75 75 33.645 75 75-33.645 75-75 75zm86-146c-8.285 0-15-6.715-15-15s6.715-15 15-15 15 6.715 15 15-6.715 15-15 15zm0 0"
								/>
								<path
									d="M377 0H135C60.562 0 0 60.563 0 135v242c0 74.438 60.563 135 135 135h242c74.438 0 135-60.563 135-135V135C512 60.562 451.437 0 377 0zm45 332c0 49.625-40.375 90-90 90H180c-49.625 0-90-40.375-90-90V180c0-49.625 40.375-90 90-90h152c49.625 0 90 40.375 90 90zm0 0"
								/>
							</svg>
						</a>
						<a href="#">
							<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
								<path
									d="M23.994 24v-.001H24v-8.802c0-4.306-.927-7.623-5.961-7.623-2.42 0-4.044 1.328-4.707 2.587h-.07V7.976H8.489v16.023h4.97v-7.934c0-2.089.396-4.109 2.983-4.109 2.549 0 2.587 2.384 2.587 4.243V24zM.396 7.977h4.976V24H.396zM2.882 0C1.291 0 0 1.291 0 2.882s1.291 2.909 2.882 2.909 2.882-1.318 2.882-2.909A2.884 2.884 0 002.882 0z"
								/>
							</svg>
						</a>
					</view>
				</view>
				<view class="card-section" :class="curSection == '#experience' ? 'is-active' : ''" id="experience">
					<view class="card-content">
						<view class="card-subtitle">WORK EXPERIENCE</view>
						<view class="card-timeline">
							<view class="card-item" data-year="挂号:">
								<view class="card-item-title">[{{ registrationInfo.department }}] 挂号</view>
								<view class="card-item-desc">{{ registrationInfo.createtime }}</view>
							</view>
							<view class="card-item" data-year="就诊:">
								<view class="card-item-title">就诊时间</view>
								<view class="card-item-desc">{{ registrationInfo.clinictime }}</view>
							</view>
							<view class="card-item" data-year="完成:">
								<view class="card-item-title">就诊完毕</view>
								<view class="card-item-desc">{{ registrationInfo.doctor }} 医生已完成就诊</view>
							</view>
						</view>
					</view>
				</view>
				<view class="card-section" :class="curSection == '#contact' ? 'is-active' : ''" id="contact">
					<view class="card-content">
						<view class="card-subtitle">CONTACT</view>
						<view class="card-contact-wrapper">
							<view class="card-contact">
								<svg
									xmlns="http://www.w3.org/2000/svg"
									viewBox="0 0 24 24"
									fill="none"
									stroke="currentColor"
									stroke-width="2"
									stroke-linecap="round"
									stroke-linejoin="round"
								>
									<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
									<circle cx="12" cy="10" r="3" />
								</svg>
								Visa医院 [{{ registrationInfo.department }}]
							</view>
							<view class="card-contact">
								<svg
									xmlns="http://www.w3.org/2000/svg"
									viewBox="0 0 24 24"
									fill="none"
									stroke="currentColor"
									stroke-width="2"
									stroke-linecap="round"
									stroke-linejoin="round"
								>
									<path
										d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"
									/>
								</svg>
								{{ cardInfo.phone }}
							</view>
						</view>
					</view>
				</view>
				<view class="card-buttons">
					<button data-section="#about" :class="curSection == '#about' ? 'is-active' : ''" @click="curSection = '#about'">医生建议</button>
					<button data-section="#experience" :class="curSection == '#experience' ? 'is-active' : ''" @click="curSection = '#experience'">就诊经历</button>
					<button data-section="#contact" :class="curSection == '#contact' ? 'is-active' : ''" @click="curSection = '#contact'">联系患者</button>
				</view>
			</view>
		</view>
	</u-mask>
</template>

<script>
export default {
	props: {
		cardid: {
			type: String,
			default: null
		},
		registrationId: {
			type: String,
			default: null
		}
	},
	data() {
		return {
			curSection: '#about',
			show: true,
			cardInfo: {
				cardid: 'feb9542e-d63d-11eb-8c41-f8ac651cc707',
				name: '未知',
				phone: 'null',
				password: '123456',
				createtime: '2021-06-26T15:00:56',
				deletetime: null
			},
			registrationInfo: {
				id: '4445eb9f27ac49fb8cbaeb63d7fd9665',
				cardid: 'feb9542ed63d11eb8c41f8ac651cc707',
				department: '未知',
				doctor: null,
				advice: null,
				clinictime: '2021-06-27 18:22:31',
				createtime: '2021-06-27 18:22:21',
				deletetime: null
			}
		};
	},
	created() {
		console.log(this.cardid, this.registrationId);
		this.loadInfo(this.cardid, this.registrationId);
	},
	methods: {
		closeFun(){
			this.$emit('closeFun')
		},
		loadInfo(cardid, registrationId) {
			if (this.$u.test.isEmpty(cardid) || this.$u.test.isEmpty(registrationId)) {
				return;
			}
			this.$u
				.get('/getCardInfo/', {
					cardid: cardid
				})
				.then(res_getCardInfo => {
					this.cardInfo = res_getCardInfo;
				});
			this.$u
				.get('/getRegistration/', {
					registrationId: registrationId
				})
				.then(res_getRegistration => {
					this.registrationInfo = res_getRegistration;
				});
		}
	}
};
</script>

<style>
@import './css/style.css';
</style>
<style lang="scss">
.closeIcon {
	width: 25px;
	height: 25px;
	position: absolute;
	z-index: 99;
	top: 5px;
	right: 10px;
}
</style>
